<template>
    <div class="detaile">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="onClickLeft"></i>
            <span>详情</span>
            <i class="iconfont iconzuojiantou" style="color: white;"></i>
        </div>
        <div class="content">
            <div class="centent-box">
                <p class="tite">{{arraydata.title}}</p>
                <p class="time">{{arraydata.sendTime}}</p>
            </div>
            <p class="timecetext">内容：</p>
            <div v-html="arraydata.content">{{arraydata.content}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name:'detaile',
    data (){
        return {
            MyuserId:"",//用户id
            id:"",
            source:"",
            arraydata:{},
            value:""
        }
    },
    created (){
        this.loadComments()
        this.id = this.$route.query.id
        this.source = this.$route.query.source
        this.value = this.$route.query.value
        this.PostDetails();

         // // 监听浏览器返回
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }

    },
    destroyed(){
        // 销毁监听浏览器事件
        window.removeEventListener('popstate', this.goBack, false);
    },
    methods:{
        //取出用户id
        loadComments() {
            var list = JSON.parse(localStorage.getItem("key"));
            this.MyuserId = list.userId;
        },
        onClickLeft (){
            this.$router.push({path:"/NewsDetails",query:{value:this.value,source:this.source}})
        },
        PostDetails(){
            this.$axios.post("/me/message/message",{
                id: this.id,
                source: this.source,
                userId: this.MyuserId,
            }).then(res =>{
                // console.log(res)
                this.arraydata = res.data.data
            })
        },
        goBack(){
            this.$router.push({path:"/NewsDetails",query:{value:this.value,source:this.source}});
        }
    }
  }
</script>

<style lang="less" scoped>
.detaile{
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    font-size: 0;
    .title{
        width: 100%;
        font-size: 0.36rem;
        color:#333333;
        height: 1.25rem;
        line-height: 1.25rem;
        display: flex;
        justify-content: space-between;
        padding: 0 0.2rem;
        box-sizing: border-box;
        background: #FFFFFF;
    }
    .content{
        font-size: 0.26rem;
        margin-top:0.2rem;
        background-color: #fff;
        padding: 0.2rem 0.3rem 0.2rem 0.3rem;
        box-sizing: border-box;
        .centent-box{
            width: 100%;
            display: flex;
                .tite{
                width: 100%;
                height: 0.7rem;
                font-size: 0.32rem;
                line-height: 0.7rem;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                }
                .time{
                width: 100%;
                height: 0.7rem;
                font-size: 0.24rem;
                line-height: 0.7rem;
                margin-left: 1.8rem;
            }
        }
        .timecetext{
            font-size: 0.28rem;
            margin-bottom: 0.15rem;
        }
    }
}
</style>
